<template>
  <div>
    <!-- 工单查询 -->
    <div style="height: 25px;line-height: 50px;margin: 15px 0; display: flex;
            justify-content: center;
            align-items: center;">
      <el-input
        style="width: 200px;"
        clearable
        placeholder="请输入施工工单号"
        suffix-icon="el-icon-search"
        type="text"
        v-model="search">

      </el-input><el-button class="ml-5" type="primary" @click="load">搜索</el-button>
    </div>

    <!-- 工单信息表 -->
    <el-table
      :data="orders"
      style="width: 100%"
      v-loading="loading"
      :default-sort = "{prop: 'oid', order: 'descending'}"
      :row-class-name="tableRowClassName"
      >
      <el-table-column prop="oid" label="工单号" width="105px"></el-table-column>
      <el-table-column prop="category" label="施工类型" width="80px"></el-table-column>
      <el-table-column prop="company" label="施工公司" width="80px"></el-table-column>
      <el-table-column prop="applicant" label="申请人" width="60px"></el-table-column>
      <el-table-column prop="uname" label="审批人" width="70px"></el-table-column>
      <el-table-column prop="department" label="审批人部门" width="100px"></el-table-column>
      <el-table-column prop="phone" label="联系方式" width="100px"></el-table-column>
      <el-table-column prop="status" label="工单状态" width="100px"
                       :filters="[{ text: '准备随工', value: '准备随工' },
                       { text: '待审批', value: '待审批' },
                       { text: '已完成', value: '已完成' }]"
                       :filter-method="filterButton"
                       filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-button style="margin: auto;" type="success" round v-if="scope.row.status === '准备随工'">准备随工</el-button>
          <el-button style="margin: auto;" type="warning" round v-else-if="scope.row.status === '待审批'">待审批</el-button>
          <el-button style="margin: auto;" type="info" round v-else-if="scope.row.status === '已完成'">已完成</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="startday"  label="施工开始日" width="100px"></el-table-column>
      <el-table-column prop="endday"  label="施工结束日" width="100px"></el-table-column>
      <el-table-column prop="rid" label="施工机房" width="74px"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="90px"></el-table-column>

      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <!--签收随工-->
          <el-button type="success" plain style="margin: auto;"
                     v-if="scope.row.status === '准备随工'"
                     @click="handle(scope.row)">签收随工
          </el-button>
          <!--工单审批-->
          <el-button type="warning" plain style="margin: auto;"
                     v-if="scope.row.status === '待审批'"
                     @click="handle(scope.row)">工单审批
          </el-button>
          <!--完成工单-->
          <el-button type="info" plain style="margin: auto;"
                     v-if="scope.row.status === '已完成'"
                     @click="handle(scope.row)">详细信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工单情况-->
    <el-dialog
      title="工单信息"
      :visible.sync="dialogVisible"
      width="60%"
      height="50%">
      <span>
        <el-descriptions class="margin-top" :column="3"  border>
        <el-descriptions-item label="工单号">{{ this.descriptions.oid }}</el-descriptions-item>
        <el-descriptions-item label="施工类型">{{ this.descriptions.category }}</el-descriptions-item>
        <el-descriptions-item label="施工公司">{{ this.descriptions.company }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ this.descriptions.applicant }}</el-descriptions-item>
        <el-descriptions-item label="审批人">{{ this.descriptions.uname }}</el-descriptions-item>
        <el-descriptions-item label="审批人部门">{{ this.descriptions.department }}</el-descriptions-item>
        <el-descriptions-item label="工单状态">{{ this.descriptions.status }}</el-descriptions-item>
        <el-descriptions-item label="施工开始日">{{ this.descriptions.startday }}</el-descriptions-item>
        <el-descriptions-item label="施工结束日">{{ this.descriptions.endday }}</el-descriptions-item>
        <el-descriptions-item label="施工机房">{{ this.descriptions.rid }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ this.descriptions.remarks }}</el-descriptions-item>
        <el-descriptions-item label="工单号">{{ this.descriptions.oid }}</el-descriptions-item>
      </el-descriptions>
      </span>

      <el-table
        :data="workers"
        stripe
        v-loading="loading1"
        style="width: 100%; margin-top: 15px;">
        <el-table-column prop="wname" label="施工人员姓名" width="100"></el-table-column>
        <el-table-column prop="manufacturer" label="所属厂商" width="80"></el-table-column>
        <el-table-column prop="idnum" label="身份证号码" width="180"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="180"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">{{ todo }}</el-button>
  </span>
    </el-dialog>
 



    <div style=" padding: 10px 0 ;display: flex;
            justify-content: center;
            align-items: center;">
      <el-pagination
        style=" position: absolute;margin: auto"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :pager-count="7"
        :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>

import request from "../../utils/request";

export default {
  name: "WorderQuery",
  data(){
    return{
      search: '',
      count1: 0,
      dialogVisible: false,
      orders: [],
      workers:[],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      descriptions: {},
      todo: '',
      loading: true,
      loading1: true,
      user: JSON.parse(localStorage.getItem('user')),
      aporder: {
        apname: '',
        uid: '',
        oid: '',
        status: '随工中',
        starttime: ''
      }
    }
  },
  created() {
    request.get("/sys/worder/countStatus").then(res=>{
      console.log(res.data);
      this.count1 = res.data
      console.log(this.count1);
    })
    this.load()
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    //页面加载时，将数据传输给后端，后端数据渲染res.data.records到前端tableData
    load(){
      request.get("/sys/worder/selectAll",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        if (res.code === '1'){
            console.log(res)
        this.orders = res.data.records
        this.loading = false
        this.total = res.data.total
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
        
      })


    },
    // 根据行中status 进行不同提交表单操作
    submit(){
      switch(this.descriptions.status) {
     case '待审批':
        this.descriptions.uname = this.user.name
        this.descriptions.department = this.user.department
        this.descriptions.phone = this.user.phone
        this.descriptions.status = '准备随工'
        request.put("/sys/worder/finish",this.descriptions).then(res =>{
          console.log(res);
          // console.log(this.ruleForm)
          if (res.code === '1'){
            this.$message({
              type: "success",
              message: "授权审批成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新
        this.dialogVisible = false
        });
        this.load() //刷新
        this.dialogVisible = false
        break;
     case '已完成':
        this.load() //刷新
        this.dialogVisible = false
        break;
      case '准备随工':
      this.aporder.apname = this.user.name;
      this.aporder.oid = this.descriptions.oid;
      this.aporder.phone = this.user.phone;
    request.post("/sys/aporder/add",this.aporder).then(res=>{
      this.descriptions.status = '随工中'
      console.log(res);
          // console.log(this.ruleForm)
          if (res.code === '1'){
            this.$message({
              type: "success",
              message: "签收随工成功,可在我的随工中查看"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新
        this.dialogVisible = false
    })
    this.load() //刷新
        this.dialogVisible = false
        break;
} 
    },
    //根据不同status 改变表单中提交按钮的值
    handle(row){
      this.descriptions = JSON.parse(JSON.stringify(row))
      switch(this.descriptions.status) {
     case '待审批':
        this.todo = '同意施工'
        break;
     case '已完成':
        this.todo = '确定'
        break;
      case '准备随工':
        this.todo = '签收随工'
        break;
      } 
      request.put("/sys/workers/selectWorkers",this.descriptions).then(res=>{
        console.log(res);
        if (res.code === '1'){
          this.workers = res.data
          this.loading1 = false
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
      })
        this.dialogVisible = true
    },
    handleSizeChange(pageSize) {  //改变当前每页显示个数触发
      this.pageSize = pageSize;
      this.load()
    },
    filterButton(value, row) {
      return row.status === value;
    },
    handleCurrentChange(currentPage) {  //改变当前页码 触发
      this.currentPage = currentPage;
      this.load()
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
